import React from 'react';
import Menus from './Menus';
import ReactDOM from 'react-dom';
import {Router, Route,hashHistory,IndexRoute, Redirect} from 'react-router';
require('es6-promise').polyfill();
require('isomorphic-fetch');
export default class Login extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            mounted:false,
            show:false,
            phoneValidation:"",
            codeText:"获取验证码11213221",
            disabled:true,
            codeStyle:{
                backgroundColor:"#FDD855",
            }
        }
    }
    componentDidMount(){
        this.setState({
            mounted:true
        })
    }

    getCode = ()=>{

        if(this.state.mounted){
             if(this.state.disabled){
                 this.validate();
             }
        }
    }
//  点击获取验证码
    validate(){
            let login =  ReactDOM.findDOMNode(this.refs.login);
            let phone=login.querySelector("#phone").value;
            if(phone==""||phone==null){
                this.setState({
                    show:true,
                    phoneValidation:"请填写手机号"

                })
            }else{
                var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                if(!myreg.test(phone)){
                    this.setState({
                        show:true,
                        phoneValidation:"请正确填写手机号"
                    })

                }else {
                    this.setState({
                        show:false,
                        disabled:false,
                        codeStyle:{
                            backgroundColor:"rgb(153, 153, 153)",
                        }
                    })
                    let wait=60;
                    let timeInterver=setInterval(function () {
                        wait--;
                        if(wait<0){
                            clearInterval(timeInterver);
                            this.setState({
                                show:false,
                                codeText:"获取验证码",
                                disabled:true,
                                codeStyle:{
                                    backgroundColor:"rgb(243, 123, 29)",
                                }
                            })

                        }else {
                            this.setState({
                                codeText :wait+"秒"
                            })
                        }

                    }.bind(this),1000)
                }
            }



    }
    //确定按钮
    confirmButton(){
        this.setState({
            show:false
        })
    }

//点击登录 验证数据
    loginButton(){
        let login =  ReactDOM.findDOMNode(this.refs.login);
        let phone=login.querySelector("#phone").value;
        let codeValue=login.querySelector("#code").value;

        if(phone==""||phone==null ||codeValue==""||codeValue==null){
            this.setState({
                show:true,
                phoneValidation:"请填写手机号或验证码"

            })
        }else{
            var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(!myreg.test(phone)){
                this.setState({
                    show:true,
                    phoneValidation:"请正确填写手机号"
                })
            }else {
                let data={
                    phone:phone,
                    code:codeValue
                }
              //  body:JSON.stringify(data),
                fetch('./text/text.json',
                    {
                        method: 'get',
                        headers: {
                            'Accept': 'application/json',
                            "Content-Type": "application/json"
                        },


                    }
                ).then(function(response) {
                        return response.json();
                    }).then((json)=>{
                    console.log(json);
                    localStorage.setItem('userid',json.phone);
                    hashHistory.replace({
                        pathname:"/"
                    })


                }).catch(function(ex) {
                    console.log('parsing failed', ex)
                })

           }
        }
    }
    render(){
        return(
        <div>
            <div className="login" ref='login'>
              <ul>
                  <li>
                      <input type="number" placeholder="请输入手机号" id="phone"/>
                      <span className="getCode"  id="getCode"  onClick={this.getCode.bind(this)} style={this.state.codeStyle}>{this.state.codeText}</span>
                  </li>
                  <li>
                      <input type="number" placeholder="请输入验证码" id="code"/>
                      <span className="">没有收到？</span>
                  </li>
              </ul>
                <button className="login-button" onClick={this.loginButton.bind(this)}>登录</button>
                <p className="login-info">点击登录，即表示您同意<b className="xieyi">《叮当到家用户协议》</b></p>
            </div>
            <Menus/>
            <div className={(this.state.show?'show':'hidden')+" " +"tip"}>
                <div className="tip-content">
                   <div className="tip-inner">
                      <div className="tip-title">提示</div>
                      <div className="tip-text">{this.state.phoneValidation}</div>
                   </div>
                    <div className="tip-buttons">
                         <span className="tip-button" onClick={this.confirmButton.bind(this)}>确定</span>
                    </div>
                </div>
            </div>
        </div>

        )

    }
}
